<template>
  <div class="filter">
    <div class="filter-items">
      <div class="item">
        <p class="item-title">高中</p>
        <div ref="items_1" class="item-filter-contianer">
          <a @click="changeFilter">全部</a>
          <a @click="changeFilter" v-for="item in h_filter_list" :key="item">{{item}}</a>
        </div>
      </div>
      <div class="item">
        <p class="item-title">初中</p>
        <div ref="items_2" class="item-filter-contianer">
          <a @click="changeFilter">全部</a>
          <a @click="changeFilter" v-for="item in now_h_filter_list" :key="item">{{item}}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["subject"],
  data() {
    return {
      m_filter_list: {
        yuwen: [
          "人教版",
          "语文版",
          "苏教版",
          "鄂教版",
          "鲁教版",
          "北师大版",
          "沪教版",
          "冀教版",
          "浙教版",
          "河大版"
        ],
        shuxue: [
          "北师大版",
          "人教版",
          "苏科版",
          "京教版",
          "鲁教版",
          "华师大版",
          "浙教版",
          "湘教版",
          "冀教版"
        ],
        yingyu: [
          "新人教",
          "外研版",
          "冀河版",
          "鲁教版",
          "牛津版",
          "湘教版",
          "北师版"
        ],
        wuli: ["新人教", "教科版", "粤沪版", "苏科版", "北师大", "沪科版"],
        huaxue: [
          "人教版",
          "上海教育版",
          "湘教版",
          "粤教版",
          "鲁教版",
          "北京义教版"
        ],
        zhengzhi: [
          "人教版",
          "湘教版",
          "苏教版",
          "科教版",
          "北师版",
          "鄂教版",
          "鲁教版",
          "陕教版",
          "人民版"
        ],
        lishi: ["人教版", "人教版社会", "北师版", "川教版"],
        shengwu: ["新人教", "济南版", "苏教版", "苏科版", "北师大", "北京版"],
        dili: ["新人教", "湘教版", "中图版"]
      },
      h_filter_list: ["人教版", "北师大版", "江苏教育版", "西南师范版"],
      now_h_filter_list: []
    };
  },
  computed: {
    _subject() {
      return this.subject;
    }
  },
  watch: {
    _subject(newValue) {
      this.now_h_filter_list = this.m_filter_list[newValue];
    }
  },
  methods: {
    changeFilter(e) {
      Array.prototype.forEach.call(this.$refs.items_1.childNodes, item => {
        item.classList.remove("item-active");
      });
      Array.prototype.forEach.call(this.$refs.items_2.childNodes, item => {
        item.classList.remove("item-active");
      });
      e.target.classList.add("item-active");
    }
  },
  mounted() {
    this.now_h_filter_list = this.m_filter_list[this.subject];
  }
};
</script>

<style lang="scss" scoped>
.filter {
  width: 800px;
  .filter-items {
    width: 100%;
    .item {
      .item-title {
        width: 52px;
        height: 30px;
        line-height: 30px;
        font-weight: 700;
        font-size: 17px;
        color: #07111b;
        text-align: left;
      }
      .item-filter-contianer {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 20px;
        a {
          &.item-active {
            color: #fff;
            border-radius: 5px;
            background-color: #8fd46c;
          }
          transition: all 0.2s;
          cursor: pointer;
          display: block;
          line-height: 14px;
          padding: 8px 10px;
          font-size: 15px;
          margin: 10px 10px;
        }
      }
    }
  }
}
</style>